<template>
	<view :class="{ topCheck: true, fixed: isFlexd, isBottom: flexdBottom }">
		<label  @click="change">
			<checkbox @click="change" value="cb" :checked="allCheck" color="#fff" activeBackgroundColor="#32DBBA"
				style="transform:scale(0.7)" />
			全选
		</label>
		<text class="cancel" @click="cancel">取消</text>
	</view>

	<view class="afterbox" v-if="isFlexd && !flexdBottom"></view>

</template>

<script setup>
	/**
	 * @cancelClick 点击取消按钮触发事件
	 * @checkChange 点击全选按钮触发事件
	 *
	 * isFlexd 是否固定 默认开启且顶部
	 * flexdBottom 是否底部 默认关闭
	 * 
	 */
	import {
		ref
	} from 'vue'
	const props = defineProps({
		allCheck: {
			type: Boolean,
			default: false
		},
		isFlexd: {
			type: Boolean,
			default: true
		},
		flexdBottom: {
			type: Boolean,
			default: false
		}
	})
	const isChecked = ref(false)
	const emit = defineEmits(['cancelClick', 'checkChange'])

	const cancel = () => {
		emit('cancelClick')
	}
	const change = () => {
		emit('checkChange')
	}


</script>

<style lang="scss" scoped>
	.afterbox {
		height: 80rpx;
	}
	.fixed {
		width: 100%;
		position: fixed;
		z-index: 90;
		background-color: #fff;
	}

	.isBottom {
		bottom: 0;
	}
	.topCheck {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		box-sizing: border-box;
		padding: 0 30rpx 0 10rpx;
		font-size: 34rpx;

		.uni-label-pointer {
			display: flex;
			align-items: center;
		}

		.cancel {
			color: red;
		}

	}
</style>